<template>
	<i-Form
		ref="userForm"
		:rules="rules"
		:model="formData"
		:label-width="80"
		inline
	>
		<FormItem label="用户名" prop="username">
			<Input v-model="formData.username" />
		</FormItem>

		<FormItem label="邮箱" prop="email">
			<Input v-model="formData.email" />
		</FormItem>

		<template v-if="userID">
			<FormItem label="旧密码" prop="oldPassword">
				<Input v-model="formData.oldPassword" type="password" />
			</FormItem>
			<FormItem label="新密码" prop="newPassword">
				<Input v-model="formData.newPassword" type="password" />
			</FormItem>
		</template>
		<template v-else>
			<FormItem label="密码" prop="password">
				<Input v-model="formData.password" type="password" />
			</FormItem>
		</template>

		<FormItem label="角色" prop="role">
			<Input v-model="formData.role" />
		</FormItem>

		<FormItem label="权限组名" prop="permission_group_id">
			<i-Select v-model="formData.permission_group_id">
				<i-Option
					v-for="item in permissionGroupData"
					:key="item.id"
					:value="item.id"
				>
					{{ item.name }}
				</i-Option>
			</i-Select>
		</FormItem>

		<FormItem label="联系电话" prop="phone">
			<Input v-model="formData.phone" type="number" />
		</FormItem>
		<br />
		<FormItem label="介绍" prop="introduction">
			<Input
				v-model="formData.introduction"
				type="textarea"
				:style="{ width: '420px' }"
			/>
		</FormItem>
	</i-Form>
</template>
<script>
export default {
	name: 'UpdateUserForm',
	props: {
		userID: {
			type: [Number, String]
		}
	},
	data() {
		return {
			formData: {
				id: '',
				username: '',
				email: '',
				newPassword: '',
				oldPassword: '',
				role: '',
				phone: '',
				introduction: '',
				permission_group_id: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}
				],
				email: [
					{
						required: true,
						message: '邮箱不能为空',
						trigger: 'blur'
					},
					{
						type: 'email',
						message: '邮箱格式不正确',
						trigger: 'blur'
					}
				],
				permission_group_id: [
					{
						required: true,
						type: 'number',
						message: '权限组不能为空',
						trigger: 'blur'
					}
				],
				newPassword: [
					{
						validator: (rule, value, callback) => {
							if (this.formData.oldPassword && !value) {
								callback(new Error('请输入新密码'))
							}
							callback()
						}
					},
				],
				oldPassword: [
					{
						validator: (rule, value, callback) => {
							if (this.formData.newPassword && !value) {
								callback(new Error('请输入旧密码'))
							}
							callback()
						}
					}
				]
			},
			permissionGroupData: []
		}
	},
	watch: {
		userID(val, oldVal) {
			this.getUserInfo(val)
		}
	},
	methods: {
		async submit() {
			const ok = await this.$refs['userForm'].validate()

			if (!ok) return

			return await this.$http.updateUser(this.formData)
		},
		async getUserInfo(val) {
			const res = await this.$http.getUserInfo(val)
			console.log('用户信息', res)
			Reflect.ownKeys(this.formData).forEach(key => {
				this.formData[key] = res[key]
			})
		},
		resetFields() {
			this.$refs['userForm'].resetFields()
		}
	},
	async created() {
		const res = await this.$http.permissionGroupSimpleList()
		this.permissionGroupData.push(...res)
		this.getUserInfo(this.userID)
	}
}
</script>
<style lang="less" scoped>
.ivu-form-item {
	width: 260px;
}
</style>
